<!-- 员工管理 -->
<template>
<div class="container">
    <div class="controlBox">
        <el-button type="primary" size="mini" @click="addAccount">新增</el-button>
        <el-button type="primary" size="mini">删除</el-button>
        <el-button type="primary" size="mini">批量导出</el-button>
    </div>
    <!-- 新增  弹框 -->
    <el-dialog title="" :visible.sync="showAddPopup" width="40%" center>
        <div class="scrollBox">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left" label-width="100px">
                <div>
                    <div>用户头像：</div>
                    <div class="pictures">
                        <el-upload class="avatar-uploader" action="http://110.187.88.70:21605/employee/upAvatar" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="avatar" :src="avatar" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
                <div style="margin-top: 30px">
                    <el-form-item label="姓名：" prop="name">
                        <el-col :span="11">
                            <el-input v-model="addForm.name" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                        <el-select v-model="addForm.sex" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号：" prop="IDnumber">
                        <el-col :span="11">
                            <el-input v-model="addForm.idCard" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="家庭住址：" prop="familyAddress">
                        <el-col :span="11">
                            <el-input v-model="addForm.address" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="职位：" prop="position">
                        <el-col :span="11">
                            <el-input v-model="addForm.position" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="部门名称：" prop="department">
                        <el-col :span="11">
                            <el-select v-model="addForm.department" placeholder="请选择部门">
                                <el-option label="护工科" value="beijing"></el-option>
                                <el-option label="办公室" value="beijing"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="linkPhone">
                        <el-col :span="11">
                            <el-input v-model="addForm.tel" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="紧急联系人" prop="exigencyLinkName">
                        <el-col :span="11">
                            <el-input v-model="addForm.emergencyContact" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="联系人电话" prop="linkPhone">
                        <el-col :span="11">
                            <el-input v-model="addForm.contactTel" />
                        </el-col>
                    </el-form-item>

                    <el-form-item label="入职时间：" prop="entryTime">
                        <el-col :span="11">
                            <el-date-picker v-model="addForm.entryTime" type="date" placeholder="请选择入职时间" style="width: 100%" value-format="yyyy-MM-dd" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="个人证书" prop="">
                        <el-col :span="11">
                            <el-input v-model="addForm.certificate" />
                        </el-col>
                    </el-form-item>
                    <!-- <el-form-item label="密码" prop="passWord">
                        <el-col :span="11">
                            <el-input v-model="addForm.passWord" />
                        </el-col>
                    </el-form-item> -->
                </div>
            </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('addForm', pushTag)">提交</el-button>
        </span>
    </el-dialog>

    <!-- 绑定卡号 -->
    <el-dialog title="" :visible.sync="showBindingPopup" width="40%" center>
        <el-form ref="bindingForm" :model="bindingForm" :rules="rules" label-position="left" label-width="100px">
            <el-form-item label="请输入服务卡号：" prop="search" size="mini" label-width="150px">
                <el-col :span="12" style="padding-right: 18px">
                    <el-input :span="10" v-model="bindingForm.search" />
                </el-col>
                <el-button type="primary" size="mini">最近一次刷卡</el-button>
            </el-form-item>

            <div class="submitBox">
                <el-button type="primary" @click="onSubmit('bindingForm')" size="mini">绑定卡号</el-button>
            </div>
        </el-form>
    </el-dialog>
    <!-- 列表 -->
    <el-table ref="multipleTable" height="700px" :data="tableData" :header-cell-style="{ background: '#efefef' }" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center">
            <template slot-scope="scope">
                {{ scope.row.sex == 0 ? "男" : "女" }}
            </template>
        </el-table-column>
        <el-table-column prop="serviceArea" label="服务区域" align="center" />
        <el-table-column prop="tel" label="账号" align="center" />
        <el-table-column prop="cardNum" label="服务卡号" align="center" />
        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column fixed="right" label="操作" width="220" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="bindingPopup(scope.$index, scope.row)">卡号绑定</el-button>
                <el-button type="text" style="color: #f56c6c" size="small" @click="handleDelete(scope.$index, scope.row)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination class="controlBox" style="margin-top: 20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>
</template>

<script>
import {
    getStaff,
    addPictures,
    addStaff,
    delStaff,
    updaStaff,
    getBindCardNum,
    getemployee
} from "../../../../api/user.js";
export default {
    components: {},
    data() {
        return {
            showAddPopup: false,
            showBindingPopup: false,
            currentPage: 1, //  初始页
            pageSize: 10, //  每页的数据 
            total: 0, //总数
            avatar: "", //渲染的圖片
            fileurl: "", //上傳圖片
            fileList: "",
            avatar: "", //上传成功后返回的地址
            abc: '',
            pushTag:'', //判断是新增还是编辑
            addForm: {
                name: "", //姓名
                sex: "", //性别
                idCard: "", //身份证号
                address: "", //家庭住址
                position: "", //职位
                department: "", //部门
                tel: "", //联系电话
                emergencyContact: "", //紧急联系人
                contactTel: "", //联系人电话
                entryTime: "", //入职时间
                certificate: "", //证书
                passWord: "", //密码
                id:'',
            },
            options: [{
                    value: 0,
                    label: "男",
                },
                {
                    value: 1,
                    label: "女",
                },
            ],
            bindingForm: {
                room: "",
                search: "",
            },
            roomList: [{
                    id: 1,
                    name: "WS101A",
                },
                {
                    id: 2,
                    name: "WS102B",
                },
                {
                    id: 3,
                    name: "WS1022",
                },
            ],
            redactFormIndex: "",
            tableData: [], //员工列表
            linkManList: [{
                    linkMan: "晓雅",
                    linkPhone: "13668281373",
                },
                {
                    linkMan: "窦艾",
                    linkPhone: "13668281373",
                },
            ],
            rules: {
                name: [{
                    required: true,
                    message: "请填写姓名",
                    trigger: "blur",
                }, ],
                sex: [{
                    required: true,
                    message: "请填写性别",
                    trigger: "blur",
                }, ],
                state: [{
                    required: true,
                    message: "请选择状态",
                    trigger: "change",
                }, ],
                idCard: [{
                        required: true,
                        message: "请填写身份证号码",
                        trigger: "blur",
                    },
                    {
                        required: true,
                        pattern: "^[1-9]\\d{5}(18|19|20|(3\\d))\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]",
                        message: "请填写正确的身份证号码",
                        trigger: "blur",
                    },
                ],
                search: [{
                        required: true,
                        message: "请填写服务卡号",
                        trigger: "blur",
                    },
                    {
                        required: true,
                        pattern: "^[0-9]{10}$",
                        message: "请填写正确的服务卡号",
                        trigger: "blur",
                    },
                ],
                birthday: [{
                    required: true,
                    message: "请选择出生年月",
                    trigger: "change",
                }, ],
                address: [{
                    required: true,
                    message: "请填写家庭住址",
                    trigger: "blur",
                }, ],
                tel: [{
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur",
                    },
                    {
                        required: true,
                        pattern: "^1[3456789]\\d{9}$",
                        message: "请输入正确的联系电话",
                        trigger: "blur",
                    },
                ],
                accountNumber: [{
                        required: true,
                        message: "请输入账号",
                        trigger: "blur",
                    },
                    {
                        required: true,
                        pattern: "^[0-9]{2}$",
                        message: "请输入正确的账号，账号位2位数字",
                        trigger: "blur",
                    },
                ],
                entryTime: [{
                    required: true,
                    message: "请填写入院时间",
                    trigger: "blur",
                }, ],
                careLevel: [{
                    required: true,
                    message: "请选择护理等级",
                    trigger: "change",
                }, ],
                entryAssess: [{
                    required: true,
                    message: "请选择入住评估",
                    trigger: "change",
                }, ],
                tryLiveAssess: [{
                    required: true,
                    message: "请选择试住评估",
                    trigger: "change",
                }, ],
                continueAssess: [{
                    required: true,
                    message: "请选择持续评估",
                    trigger: "change",
                }, ],
                passWord: [{
                        required: true,
                        message: "请输密码",
                        trigger: "blur",
                    },
                    {
                        required: true,
                        pattern: "^[A-Za-z0-9]{6,8}$",
                        message: "密码为6~8位数字和字母",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.avatar = URL.createObjectURL(file.raw);
            this.avatar = res.data.url;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },

        addAccount() {
            this.pushTag = 'add';
            this.showAddPopup = true;
            this.addForm = {
                name: "", //姓名
                sex: "", //性别
                idCard: "", //身份证号
                address: "", //家庭住址
                position: "", //职位
                department: "", //部门
                tel: "", //联系电话
                emergencyContact: "", //紧急联系人
                contactTel: "", //联系人电话
                entryTime: "", //入职时间
                certificate: "", //证书
                // passWord: "", //密码
            };
        },
        //新增员工编辑员工
        submitForm(formName, tag) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (tag == "add") {
                        addStaff(
                                this.addForm.name, //名字
                                this.avatar, //头像地址
                                this.addForm.idCard, //身份证
                                this.addForm.sex, //性别
                                this.addForm.tel, //电话
                                this.addForm.address, //家庭地址
                                this.addForm.position, //职位
                                this.addForm.emergencyContact, //联系人名字
                                this.addForm.contactTel, //联系人电话
                                this.addForm.entryTime, //入院时间
                                this.addForm.certificate //证书
                            )
                            .then((res) => {
                                console.log(res);
                                this.showAddPopup = false;
                                this.imageUrl = '';
                                this.getList();
                                this.$message({
                                    type: "success",
                                    message: "新增成功!",
                                });
                            })
                            .catch((res) => {
                                this.$message("新增失败");
                            });
                    } else if (tag == "edit") {
                        this.tableData[this.redactFormIndex] = this.addForm;
                        console.log(this.tableData[this.redactFormIndex]);
                        updaStaff(
                            this.addForm.id,
                            this.addForm.name, //名字
                            this.avatar, //头像地址
                            this.addForm.idCard, //身份证
                            this.addForm.sex, //性别
                            this.addForm.tel, //电话
                            this.addForm.address, //家庭地址
                            this.addForm.position, //职位
                            this.addForm.emergencyContact, //联系人名字
                            this.addForm.contactTel, //联系人电话
                            this.addForm.entryTime, //入院时间
                            this.addForm.certificate, //证书
                        ).then(res => {
                            console.log(res);
                            this.showAddPopup = false;
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            })
                        }).catch(res => {
                            this.$message('修改失败')
                        })
                    }
                    // this.$message("submit!");
                } else {
                    this.$message("error submit!!");
                    return false;
                }
            });
        },
        //通过id查找员工
        getstaff(){
          
        },
        //绑定卡号
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    getBindCardNum(
                            this.abc.id,
                            this.bindingForm.search
                        )
                        .then((res) => {
                            if (res.code == 2000) {
                                this.showBindingPopup = false;
                                this.bindingForm = []
                                this.$message({
                                    type: "success",
                                    message: "绑定成功",
                                })
                                this.getList()
                            } else {

                            }
                        })
                        .catch((res) => {
                            console.log(err);
                        });

                } else {
                    this.$message("error submit!!");
                    return false;
                }
            });
        },
        // 编辑
        handleEdit(index, row) {
            this.pushTag = 'edit'
            this.showAddPopup = true;
             this.redactFormIndex = index;
            this.addForm = row;
            console.log(this.addForm);
            getemployee(
                 this.addForm.id
            ).then(res =>{
                if (res.code==2000){
                  this.addForm=res.data.addForm.employee
                  console.log(this.addForm);
                }

            }).catch(res =>{
             
            })
        },
        //绑定
        bindingPopup(index, row) {
            this.showBindingPopup = true;
            console.log(index, row);
            this.abc = row
            console.log(this.abc);
        },
        //删除员工
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    delStaff(row.id)
                        .then((res) => {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        })
                        .catch((err) => {
                            this.$message({
                                type: "info",
                                message: "删除失败",
                            });
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 初始页currentPage、初始每页数据数pageSize和数据data
        handleSizeChange: function (size) {
            this.pageSize = size;
            this.getList();
            console.log(this.pageSize); //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.getList();
            console.log(this.currentPage); //点击第几页
        },
        //获取员工列表
        getList() {
            getStaff(this.currentPage, this.pageSize)
                .then((res) => {
                    // console.log(res);
                    this.tableData = res.data.employees;
                    this.total = res.data.total;
                    console.log(this.tableData);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    computed: {},
    watch: {},
    created() {
        this.getList();
    },
    mounted() {},
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {},
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;

    .controlBox {
        padding-bottom: 16px;
    }

    .scrollBox {
        height: 400px;
        overflow: auto;
    }

    .scrollBox::-webkit-scrollbar {
        display: none;
    }

    .listTop {
        font-size: 16px;
        color: #666;
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .submitBox {
        padding: 14px 0;
        display: flex;
        justify-content: center;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .pictures {
        width: 120px;
        height: 120px;
        border: 1px solid gray;
        position: relative;

        .avatar-uploader-icon {
            position: absolute;
            top: -25px;
            left: 16%;
            margin-left: -50px;
        }

        .avatar {
            width: 120px;
            height: 120px;
        }
    }
}
</style>
